<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
	<meta charset="UTF-8">
	<title>Reports using TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.5.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.5.1/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="static/css/icommon.css" />
	<script type="text/javascript" src="static/js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="static/jquery-easyui-1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="static/js/HhUtil.js?t=20170109"></script>

	<script type="text/javascript">
	function add_info(){
		$("#userForm").form("clear");
		$("#power").combobox("setValues", "1");
		$("#sort_id").textbox("setValue", "0");
		$("#parent_id").val($("#parent_id_save").val());
		$("#userDialog").dialog("open");
	}

	//修改
	function edit_fun() {
		 var rows= dataGrid.datagrid('getSelected');

			if(rows == "undefined"||rows == null){
				HdUtil.messager.info("请选中编辑行");
				return;
			}
			//= dataGrid.datagrid('getSelected');
			// id = rows.id;

		$("#userForm").form("clear").form("load", rows);
		$("#parent_id").val($("#parent_id_save").val());
		$("#userDialog").dialog("open");
	}

	//删除
	function delete_fun(menu_id) {
		$.messager.confirm(HdUtil.constant.CONFIRM, HdUtil.constant.DELETE_CONFIRM, function (r) {
				if (r) {
					$.ajax({
						method: "post",
						url: "/delmenu",
						data: {
							menu_id: menu_id
						},
						success: function (data) {
							if (data.code == "0") {
								HdUtil.messager.slide(HdUtil.constant.DELETE_SUCCESS);
								$("#dataGrid").datagrid("reload");
								Ajax.get('/menumanage?left=1', init_menu_callback);
							} else {
								HdUtil.messager.error(data.msg);
							}
						}
					})
				}
			});

	}

	//保存
	function saveUser() {
		$("#userForm").form("submit", {
			url: "/updatemenu",
			onSumbit: function () {
				$("#userForm").form.validate();
			},
			success: function (data) {
				data = JSON.parse(data);
				if (data.code == "0") {
					$("#userDialog").dialog("close");
					HdUtil.messager.slide(data.msg);
					$("#dataGrid").datagrid("reload");
					Ajax.get('/menumanage?left=1', init_menu_callback);
				} else {
					$("#userDialog").dialog("close");
					HdUtil.messager.error(data.msg);
				}
			}
		});
	}


    var dataGrid;

    $(function () {
		//批量导入

        //首次进入拉取
        dataGrid = $('#dataGrid').datagrid({
            url: '/menumanage?menu_type=1&parent_id=1',
            method:'get',
			width: '100%',
            fit: true,
            striped: true,
            singleSelect: true,
            columns: [[{
                title: 'menu_id',
                field: 'menu_id',
                hidden: true
            }, {
                width: '22%',
                title: '显示名称',
                field: 'menu_name',
                sortable: false
            }, {
                width: '22%',
                title: '跳转路由',
                field: 'link',
                sortable: false
            },{
                width: '22%',
                title: '需要权限',
                field: 'power',
                sortable: false
            },{
                width: '22%',
                title: '排序ID',
                field: 'sort_id',
                sortable: false
            }, {
				field: 'action',
				title: '操作',
				width: '15%',
				formatter: function (value, row, index) {
					var str = '';
					str += $.formatString('<a href="javascript:void(0)" class="user-easyui-linkbutton-del" data-options="plain:true,iconCls:\'icon-del\'" onclick="delete_fun(\'{0}\');" >删除</a>', row.menu_id);
					return str;
				}
			}]],
			onLoadSuccess: function (data) {
                $('.user-easyui-linkbutton-del').linkbutton({text: '删除', plain: true, iconCls: 'icon-del'});
            },
            toolbar: '#toolbar'
        });


		//用户维护（新增、修改）界面
        $("#userDialog").dialog({
            title: "新增",
            width: 550,
            height: 250,
            closed: true,
            cache: false,
            modal: true,
            buttons: [{
                text: '保存',
                handler: function () {
                    saveUser();
                }
            }, {
                text: '关闭',
                handler: function () {
                    $("#userDialog").dialog("close");
                }
            }]
        });


        });
    </script>
</head>
<body style="width:100%;height:100%;margin: 0px">
<div class="easyui-layout" style="width:100%;height:100%;position: absolute;left: 0px;top:0px;margin:0px">
	<div data-options="region:'west',split:true" title="父菜单" style="width:15%;height:100%;margin: 0px;">
		<a onclick="get_parent_menu(-1);" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" style="float:left">菜单目录管理</a>
		<div id="menu_div" class="easyui-accordion  i_accordion_menu" fit="true" border="false">
		</div>
	</div>

	<div data-options="region:'center',split:true" title="" style="width:50%;height:100%;margin: 0px;">
		<div data-options="region:'center',border:true,title:'信息列表'" style="height: 100%;width:100%">
			<table id="dataGrid" data-options="fit:true,border:false">
			</table>
		</div>
	</div>
</div>

<div id="toolbar" style="display: none;">
	<table>
		<a onclick="add_info()" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加</a>
		<a onclick="edit_fun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">编辑</a>
		<span id="menu_title" style="float: right"></span>
	</table>
</div>

<div id="userDialog">
	<input id="parent_id_save" type="hidden">
    <form id="userForm" method="post">
		<input name="parent_id" id="parent_id" type="hidden">
        <table>
            <br/>
            <tr>
                <td style="vertical-align: middle">显示名称：</td>
                <td>
                    <input name="menu_name" class="easyui-textbox" data-options="required:true"/>
					<input name="menu_id" style="display:none">
                </td>
                <td style="vertical-align: middle">跳转路由：</td>
                <td>
                    <input name="link" id="link" class="easyui-textbox"
                           data-options="required:true"/>
                </td>
            </tr>

			<tr>
                <td style="vertical-align: middle">需要权限：</td>
                <td>
					<select id="power" data-options="required:true" class="easyui-combobox" name="power"><option value="0" selected="selected">不需要</option><option value="1">需要</option></select>
                </td>
                <td style="vertical-align: middle">排序ID：</td>
                <td>
                    <input id="sort_id" name="sort_id" class="easyui-textbox" data-options="required:true"/>
                </td>
            </tr>

        </table>
    </form>
</div>
</body>

<script src="/static/js/template-web.js"></script>
<script id="menu_tpl" type="text/html">
    {{each info as item}}
		<!--<div style="height: 30px;border: 1px solid #d5dcdf;text-align:center;padding-top: 13px" onclick="get_children({{item.menu_id}})">-->
			<!--{{item.sort_id}}{{item.menu_name}}-->
		<!--</div>-->
		<div class="nav-item">
			<a href="javascript:get_children({{item.menu_id}}, '{{item.menu_name}}')">
				<span class="menu_icon_datadeal"></span>
				<span>{{item.sort_id}}{{item.menu_name}}</span>
			</a>
		</div>
	{{/each}}


</script>
<script type="text/javascript">
	var Ajax={
        get: function (url,fn){
            var obj=new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据
            obj.open('GET',url,true);
            obj.onreadystatechange=function(){
                if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState==4说明请求已完成
                    fn.call(this, obj.responseText);  //从服务器获得数据
                }
            };
            obj.send(null);
        }
    }
    function init_menu_callback(data){
        var datao = JSON.parse(data);
        if(datao.code=='0'){
            var html = template('menu_tpl', datao);
            document.getElementById('menu_div').innerHTML=html;
        }else{
            location.href='/login';
        }
    }

    function get_children(parent_id, menu_title){
		$("#menu_title").html(menu_title);
		$("#parent_id_save").val(parent_id);
		dataGrid.datagrid('load', {
				parent_id: parent_id,
				menu_type: 1
		})
	}

	function get_parent_menu(parent_id){
		$("#parent_id_save").val(parent_id);
		$("#menu_title").html("菜单目录");
		dataGrid.datagrid('load', {
				parent_id: parent_id,
				menu_type: 0
		})
	}

	$("#parent_id_save").val(1);
	$("#menu_title").html("运营统计");
    Ajax.get('/menumanage?left=1', init_menu_callback);
</script>

</html>